<template>
  <div class="shipment-fee-dialog">
    <el-dialog
      :title="$t('packet.物流报价表')"
      :visible.sync="computedVisible"
      width="800px"
    >
      <div class="table">
        <el-table
            border
            :data="computedMultiRateData"
            :span-method="arraySpanMethod"
        >
          <el-table-column
              prop="carrier"
              :label="$t('packet.物流商')"
              align="center"
          ></el-table-column>
          <el-table-column
              :label="$t('packet.服务名称')"
              prop="name"
              align="center"
          ></el-table-column>
          <el-table-column
              :label="$t('packet.预估运费（元）')"
              prop="userShippingFee"
              align="center"
          ></el-table-column>
          <el-table-column
              :label="$t('packet.选择')"
              align="center"
          >
            <template slot-scope="{row}">
              <el-radio :value="selectedMark" :label="row.mark" @input="selectMark(row)">
                <span></span>
              </el-radio>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="tips">
        <div class="red">{{ $t('packet.以上报价仅通过您填写的订单信息预估得出，最终运费费用将由承运方返回的计费重量等确定') }}</div>
        <div>{{ $t('packet.请勾选以上其中一个服务商后确认') }}</div>
      </div>
      <div class="buttons">
        <el-button @click="computedVisible = false">{{ $t('packet.取消') }}</el-button>
        <el-button type="primary" @click="$emit('confirm', selectedMark)" :disabled="!selectedMark" >{{ $t('packet.确定') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {deepClone} from "@/utils";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    multiRateData: {
      type: Array,
      default() {
        return []
      },
    },
  },
  computed: {
    computedVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    },
  },
  data() {
    return {
      selectedMark: null,
      computedMultiRateData: [],
      // 标记合并的列
      colspanMap: {},
    }
  },
  watch: {
    visible(val) {
      this.selectedMark = null;
    },
    multiRateData(val) {
      this.handleData();
    },
  },
  created() {
    this.handleData();
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'carrier') {
        if (this.colspanMap[row.carrier]) {
          if (rowIndex === this.colspanMap[row.carrier].firstIndex) {
            return [this.colspanMap[row.carrier].rowspan, 1];
          } else {
            return [0, 0];
          }
        } else {
          return [1, 1];
        }
      } else {
        return [1, 1];
      }
    },
    selectMark(row) {
      this.selectedMark = row.mark;
      console.log('this.selectedMark', this.selectedMark);
    },
    handleData() {
      this.computedMultiRateData = deepClone(this.multiRateData);
      // 重新排序，按照carrier进行排序
      this.computedMultiRateData.sort((a, b) => {
        return a.carrier.localeCompare(b.carrier);
      });
      const colspanMap = {};
      let currentCarrier = null;
      this.computedMultiRateData.forEach((item, index) => {
        if (!colspanMap[item.carrier]) {
          colspanMap[item.carrier] = {
            firstIndex: 0,
            rowspan: 0,
          };
        }
        if (currentCarrier !== item.carrier) {
          currentCarrier = item.carrier;
          colspanMap[item.carrier].firstIndex = index;
          colspanMap[item.carrier].rowspan = 1;
        } else {
          colspanMap[item.carrier].rowspan += 1;
        }
      });
      this.colspanMap = colspanMap;
    },

  }
}
</script>

<style scoped lang="less">
.tips{
  padding: 20px 0;
  line-height: 20px;
  .red{
    color: red;
  }
}
.buttons{
  text-align: right;
}
</style>
